    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓动函数封装</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                background: aqua;
                border: 1px solid #000000;
                position: absolute;
                left: 0;
            }
        </style>
    </head>
    <body>
    <button style="margin-right:20px ">移动到200</button>
    <button style="margin-bottom: 50px">移动到400</button>
    <div id="box"></div>
    <script>
        var btn200=document.getElementsByTagName('button')[0];
        var btn400=document.getElementsByTagName('button')[1];
        var box=document.getElementById('box');
        var timer=null;
        btn200.onclick=function () {
            slowMove(box,200);
            console.log(11);
        };
        btn400.onclick=function () {
            slowMove(box,400);
            console.log(101);
        };
        function slowMove(ele,target) {
            clearInterval(timer);
           timer= setInterval(function () {
                   console.log(1010);
                   var speed=(target-ele.offsetLeft)/10;
                   speed=(target-ele.offsetLeft)>0?Math.ceil(speed):Math.floor(speed);
                   ele.style.left=ele.offsetLeft+speed+'px';
                   if(Math.abs(speed)>=Math.abs(target-ele.offsetLeft)){
                    ele.style.left=target+'px';
                    clearInterval(timer);
                }
               },10);
        }
    </script>
    </body>
    </html>